<template>
  <div class="businesses-container">
    <div class="header">
      <h1>商户管理</h1>
      <button @click="addBusiness" class="btn btn-primary">
        <i class="material-icons">add</i>
        添加商户
      </button>
    </div>
    
    <div class="content">
      <div class="businesses-table">
        <table>
          <thead>
            <tr>
              <th>商户ID</th>
              <th>商户名称</th>
              <th>地址</th>
              <th>起送价</th>
              <th>配送费</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="business in businesses" :key="business.businessId">
              <td>{{ business.businessId }}</td>
              <td>{{ business.businessName }}</td>
              <td>{{ business.businessAddress }}</td>
              <td>¥{{ business.starPrice }}</td>
              <td>¥{{ business.deliveryPrice }}</td>
              <td>
                <span :class="['status', business.status === 1 ? 'active' : 'inactive']">
                  {{ business.status === 1 ? '启用' : '禁用' }}
                </span>
              </td>
              <td class="actions">
                <button @click="editBusiness(business)" class="action-btn edit">编辑</button>
                <button @click="toggleStatus(business)" class="action-btn toggle">
                  {{ business.status === 1 ? '禁用' : '启用' }}
                </button>
                <button @click="deleteBusiness(business)" class="action-btn delete">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Businesses',
  data() {
    return {
      showAddDialog: false,
      businesses: []
    }
  },
  mounted() {
    this.fetchBusinessesList()
  },
  methods: {
    async fetchBusinessesList() {
      try {
        // 使用请求参数与后端 @RequestParam 对齐
        const response = await axios.post('http://localhost:8888/elm/admin/businesses/list', null, {
          params: {
            page: 1,
            size: 100
          }
        })
        if (response.data.code === 200 || response.data.code === '200') {
          this.businesses = response.data.result.businesses || []
        }
      } catch (error) {
        console.error('获取商户列表失败:', error)
        this.businesses = []
      }
    },
    
    async editBusiness(business) {
      const newName = prompt('请输入新的商户名称:', business.businessName)
      if (newName && newName !== business.businessName) {
        try {
          await axios.post('http://localhost:8888/elm/admin/businesses/update', {
            ...business,
            businessName: newName
          })
          alert('商户信息更新成功')
          this.fetchBusinessesList()
        } catch (error) {
          console.error('更新商户失败:', error)
          alert('更新商户失败')
        }
      }
    },
    
    async toggleStatus(business) {
      try {
        const newStatus = business.status === 1 ? 0 : 1
        await axios.post('http://localhost:8888/elm/admin/businesses/status', null, {
          params: {
            businessId: business.businessId,
            status: newStatus
          }
        })
        business.status = newStatus
        alert('商户状态已更新')
      } catch (error) {
        console.error('更新商户状态失败:', error)
        alert('更新商户状态失败')
      }
    },
    
    async deleteBusiness(business) {
      if (confirm('确定要删除 ' + business.businessName + ' 吗？')) {
        try {
          await axios.post('http://localhost:8888/elm/admin/businesses/delete', null, {
            params: { businessId: business.businessId }
          })
          alert('商户删除成功')
          this.fetchBusinessesList()
        } catch (error) {
          console.error('删除商户失败:', error)
          alert('删除商户失败')
        }
      }
    },
    
    async addBusiness() {
      const businessId = prompt('请输入商户ID:')
      const businessName = prompt('请输入商户名称:')
      const businessAddress = prompt('请输入商户地址:')
      
      if (businessId && businessName) {
        try {
          await axios.post('http://localhost:8888/elm/admin/businesses/add', {
            businessId,
            businessName,
            businessAddress: businessAddress || '',
            businessExplain: '',
            orderTypeId: 1,
            starPrice: 0,
            deliveryPrice: 0
          })
          alert('商户添加成功')
          this.fetchBusinessesList()
        } catch (error) {
          console.error('添加商户失败:', error)
          alert('添加商户失败: ' + (error.response?.data?.message || error.message))
        }
      }
    }
  }
}
</script>

<style scoped>
.businesses-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  background: white;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
}

.btn-primary {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

.businesses-table {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f5f5f5;
}

th {
  padding: 15px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #eee;
}

td {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.status.active {
  background-color: #d4edda;
  color: #155724;
}

.status.inactive {
  background-color: #f8d7da;
  color: #721c24;
}

.actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn.edit {
  background-color: #e3f2fd;
  color: #1976d2;
}

.action-btn.edit:hover {
  background-color: #bbdefb;
}

.action-btn.toggle {
  background-color: #fff3e0;
  color: #f57c00;
}

.action-btn.toggle:hover {
  background-color: #ffe0b2;
}

.action-btn.delete {
  background-color: #ffebee;
  color: #c62828;
}

.action-btn.delete:hover {
  background-color: #ffcdd2;
}
</style>
